Sử dụng javascript làm game lật hình up giống nhau
11.140 lượt xem;
1 @import url('https://fonts.googleapis.com/css?family=Tangerine&display=swap');
2 @import url('https://fonts.googleapis.com/css?family=Archivo+Narrow&display=swap');
3 @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
4
5 * {
6 box-sizing: border-box;
7 }
8
9 html {
10 min-height: 100vh;
11 font-family: sans-serif;
12
13 }
14
15 body {
16 margin: 0;
17 background: radial-gradient(skyblue, azure);
18 }
19
20 .game-title {
21 color: darkblue;
22 font-family:'Tangerine', cursive;
23 font-weight: bolder;
24 text-align: center;
25 font-size: 6em;
26 }
27
28 .game-info-block {
29 grid-column: 1 / -1;
30 display: flex;
31 justify-content: space-between;
32 padding-bottom:10px;
33 }
34
35 .game-info {
36 color: darkblue;
37 font-size: 2em;
38 font-family: 'Archivo Narrow', sans-serif;
39 letter-spacing:2px;
40 }
41
42 .game-container {
43 margin: 50px auto;
44 display: grid;
45 grid-template-columns: repeat(6, auto);
46 grid-gap: 10px;
47 justify-content: center;
48 perspective: 500px;
49 }
50
51 .block {
52 position: relative;
53 cursor: auto;
54 height: 125px;
55 width: 125px;
56 }
57
58 .block-front {
59 background-color: black;
60 border-color: royalblue;
61 transform: rotateY(180deg);
62 }
63
64
65 .block-value {
66 position: relative;
67 max-width: 100%;
68 max-height: 100%;
69 transition: transform 100ms ease-in-out;
70 transform: scale(.9);
71 }
72
73 .block-face {
74 position: absolute;
75 display: flex;
76 justify-content: center;
77 align-items: center;
78 width: 100%;
79 height: 100%;
80 border-radius: 12px;
81 border-width: 1px;
82 border-style: solid;
83 overflow: hidden;
84 transition: transform 500ms ease-in-out;
85 backface-visibility: hidden;
86 }
87
88 .block.visible .block-back {
89 transform: rotateY(-180deg);
90 }
91
92 .block.visible .block-front {
93 transform: rotateY(0);
94 }
95
96
97 .block-back {
98 background-color: black;
99 border-color: royalblue;
100 transform: rotateY(0);
101 }
102
103
104 .overlay-text {
105 top: 0;
106 left: 0;
107 right: 0;
108 bottom: 0;
109 z-index: 100;
110 display: none;
111 position: fixed;
112 justify-content: center;
113 align-items: center;
114 flex-direction: column;
115 color: azure;
116 font-family: 'Dancing Script', cursive;
117 transition: background-color 500ms, font-size 500ms;
118 }
119
120 .overlay-text-small {
121 font-size: .3em;
122 }
123
124 .overlay-text.visible {
125 display: flex;
126 animation: overlay-grow 500ms forwards;
127 }
128
129 @keyframes dance {
130 0%, 100% {
131 transform: rotate(0)
132 }
133
134 25% {
135 transform: rotate(-30deg)
136 }
137
138 75% {
139 transform: rotate(30deg)
140 }
141 }
142
143 @keyframes overlay-grow {
144 from {
145 background-color: rgba(0, 0, 0, 0);
146 font-size: 0;
147 }
148
149 to {
150 background-color: rgba(0, 0, 0, .8);
151 font-size: 10em;
152 }
153 }
154
155
156
157 .blocks-sl {
158 position: relative;
159 cursor: auto;
160 height: 50px;
161 width: 50px;
162 border: 1px solid black;
163 font-family: Algerian;
164
165 }
166 .game-container-sl {
167 margin: 50px auto;
168 display: grid;
169 grid-template-columns: repeat(10, auto);
170 grid-gap: 1px;
171 justify-content: center;
172 perspective: 800px;
173 overflow:visible;
174 }
175 .image {
176 position: absolute;
177 display: flex;
178 justify-content: center;
179 align-items: center;
180 width: 505px;
181 height: 490px;
182 transition: transform 500ms ease-in-out;
183 z-index: 1;
184 }
2 @import url('https://fonts.googleapis.com/css?family=Archivo+Narrow&display=swap');
3 @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
4
5 * {
6 box-sizing: border-box;
7 }
8
9 html {
10 min-height: 100vh;
11 font-family: sans-serif;
12
13 }
14
15 body {
16 margin: 0;
17 background: radial-gradient(skyblue, azure);
18 }
19
20 .game-title {
21 color: darkblue;
22 font-family:'Tangerine', cursive;
23 font-weight: bolder;
24 text-align: center;
25 font-size: 6em;
26 }
27
28 .game-info-block {
29 grid-column: 1 / -1;
30 display: flex;
31 justify-content: space-between;
32 padding-bottom:10px;
33 }
34
35 .game-info {
36 color: darkblue;
37 font-size: 2em;
38 font-family: 'Archivo Narrow', sans-serif;
39 letter-spacing:2px;
40 }
41
42 .game-container {
43 margin: 50px auto;
44 display: grid;
45 grid-template-columns: repeat(6, auto);
46 grid-gap: 10px;
47 justify-content: center;
48 perspective: 500px;
49 }
50
51 .block {
52 position: relative;
53 cursor: auto;
54 height: 125px;
55 width: 125px;
56 }
57
58 .block-front {
59 background-color: black;
60 border-color: royalblue;
61 transform: rotateY(180deg);
62 }
63
64
65 .block-value {
66 position: relative;
67 max-width: 100%;
68 max-height: 100%;
69 transition: transform 100ms ease-in-out;
70 transform: scale(.9);
71 }
72
73 .block-face {
74 position: absolute;
75 display: flex;
76 justify-content: center;
77 align-items: center;
78 width: 100%;
79 height: 100%;
80 border-radius: 12px;
81 border-width: 1px;
82 border-style: solid;
83 overflow: hidden;
84 transition: transform 500ms ease-in-out;
85 backface-visibility: hidden;
86 }
87
88 .block.visible .block-back {
89 transform: rotateY(-180deg);
90 }
91
92 .block.visible .block-front {
93 transform: rotateY(0);
94 }
95
96
97 .block-back {
98 background-color: black;
99 border-color: royalblue;
100 transform: rotateY(0);
101 }
102
103
104 .overlay-text {
105 top: 0;
106 left: 0;
107 right: 0;
108 bottom: 0;
109 z-index: 100;
110 display: none;
111 position: fixed;
112 justify-content: center;
113 align-items: center;
114 flex-direction: column;
115 color: azure;
116 font-family: 'Dancing Script', cursive;
117 transition: background-color 500ms, font-size 500ms;
118 }
119
120 .overlay-text-small {
121 font-size: .3em;
122 }
123
124 .overlay-text.visible {
125 display: flex;
126 animation: overlay-grow 500ms forwards;
127 }
128
129 @keyframes dance {
130 0%, 100% {
131 transform: rotate(0)
132 }
133
134 25% {
135 transform: rotate(-30deg)
136 }
137
138 75% {
139 transform: rotate(30deg)
140 }
141 }
142
143 @keyframes overlay-grow {
144 from {
145 background-color: rgba(0, 0, 0, 0);
146 font-size: 0;
147 }
148
149 to {
150 background-color: rgba(0, 0, 0, .8);
151 font-size: 10em;
152 }
153 }
154
155
156
157 .blocks-sl {
158 position: relative;
159 cursor: auto;
160 height: 50px;
161 width: 50px;
162 border: 1px solid black;
163 font-family: Algerian;
164
165 }
166 .game-container-sl {
167 margin: 50px auto;
168 display: grid;
169 grid-template-columns: repeat(10, auto);
170 grid-gap: 1px;
171 justify-content: center;
172 perspective: 800px;
173 overflow:visible;
174 }
175 .image {
176 position: absolute;
177 display: flex;
178 justify-content: center;
179 align-items: center;
180 width: 505px;
181 height: 490px;
182 transition: transform 500ms ease-in-out;
183 z-index: 1;
184 }